<template>
  <!-- 添加的部分 -->
  <el-dialog v-model="avisible" @closed="requery" title="添加软件分类">
    <div>
      <el-form>
        <el-form-item>
          <el-input v-model="addInfo.tname" placeholder="分类名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="addInfo.intro" placeholder="分类简介"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="add" type="primary">添加</el-button>
      <el-button @click="avisible = false" type="danger">取消</el-button>
    </template>
  </el-dialog>

  <!-- 修改的部分 -->
  <el-dialog v-model="mvisible" @closed="requery" title="修改软件分类">
    <div>
      <el-form>
        <el-form-item>
          <el-input v-model="modifyIndo.tname" placeholder="分类名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="modifyIndo.intro" placeholder="分类简介"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <el-button @click="modify" type="primary">添加</el-button>
      <el-button @click="mvisible = false" type="danger">取消</el-button>
    </template>
  </el-dialog>

  <!--#region 查询表单 -->
  <div v-if="'query' == props.mode">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="tname" placeholder="分类名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button-group>
          <el-button @click="requery" type="primary">查询</el-button>
          <el-button type="danger">重置</el-button>
          <el-button @click="showAdd" type="primary">添加</el-button>
        </el-button-group>
      </el-form-item>
    </el-form>
  </div>
  <!-- #endregion -->
  <!-- 数据呈现的部分 -->
  <div>
    <!-- {{ page }} -->
    <el-table :data="list" stripe>
      <el-table-column label="分类名称" prop="tname"></el-table-column>
      <el-table-column label="分类简介" prop="intro"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            v-if="'query' == props.mode"
            @click="showModify(scope.row)"
            type="primary"
            size="small"
            >修改</el-button
          >
          <el-button
            v-if="'query' == props.mode"
            @click="showDelete(scope.row)"
            type="danger"
            size="small"
            >删除</el-button
          >
          <el-button
            v-if="'selector' == props.mode"
            @click="selectType(scope.row)"
            type="success"
            size="small"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页的部分 -->
  <div>
    <el-pagination
      v-model:current-page="page.pageNumber"
      v-model:page-size="page.pageSize"
      :total="page.total"
      :page-sizes="[2, 5, 10, 20]"
      @current-change="query"
      @size-change="query"
      layout="total, prev, pager, next, sizes "
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { api } from '@/js/ajax'
import { tools } from '@/js/tools'
import { ElMessage, ElMessageBox } from 'element-plus'

// 视图的呈现模式，query,selector
const props = defineProps(['mode'])
const emit = defineEmits(['type-selected'])

onMounted(() => {
  query()
})

//#region 选择的部分
const selectType = (info) => {
  console.log('选中的分类', info)
  emit('type-selected', info)
}

//#endregion

//#region 删除的部分
const showDelete = (info) => {
  ElMessageBox.confirm(`确定要删除${info.tname}吗？`, '删除确认', {
    type: 'warning',
  })
    .then(() => {
      api.delete(`/crud/softwaretype/${info.stid}`, {}, (data) => {
        ElMessage({ message: data.message, type: data.success ? 'success' : 'error' })
        requery()
      })
    })
    .catch(() => {})
}

//#endregion

//#region 修改的部分
const mvisible = ref(false)
const modifyIndo = ref({})
const showModify = (info) => {
  modifyIndo.value = tools.mergeJson(info)
  mvisible.value = true
}
const modify = () => {
  api.put('/crud/softwaretype', modifyIndo.value, (data) => {
    ElMessageBox.alert(data.message, '修改结果')
  })
}
//#endregion
//#region 添加的部分
// 思考题，如果没有执行添加的动作，关闭的时候就不要调用requery方法了

const avisible = ref(false)
const addInfo = ref({
  tname: '',
  intro: '',
})

const showAdd = () => {
  addInfo.value = {
    tname: '',
    intro: '',
  }
  avisible.value = true
}

const add = () => {
  api.post('/crud/softwaretype', addInfo.value, (data) => {
    ElMessageBox.alert(data.message, '添加结果')
    if (data.success) {
      addInfo.value = {
        tname: '',
        intro: '',
      }
    }
  })
}
//#endregion

//#region 查询的数据
const page = ref({
  pageNumber: 1,
  pageSize: 5,
})

const tname = ref('')
const list = ref([])

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const query = () => {
  api.get(
    `/crud/softwaretype/${page.value.pageSize}/${page.value.pageNumber}`,
    { tname: tname.value },
    (data) => {
      if (data.success) {
        list.value = data.data.data
        page.value = data.data.pageBean
        return
      }
      ElMessageBox.alert(data.message, '查询错误')
    },
  )
}
//#endregion
</script>

<style scoped></style>
